{% extends 'base.html' %} {% block css%}
<style type="text/css"></style>
{% endblock %} {% block body%}


<div class="row">
    <div class="col-md-12">
        <!-- inseert charts begin-->
        <!-- <div id="jqChart" style="width: 980px; height: 350px;"></div> -->
        <!-- inseert charts end-->
        <span>
          <h3>PID Setting</h3>
          <!--
          <button id="btn_pid_get_all" class="btn btn-success pull-right" style="margin-bottom:5px">
          Get all
          </button>
          -->
        </span>
        <table id="t_abc_pid" class="table table-hover table-condensed form-inline">
          <tr>
            <th>Name</th>
            <th>Index</th>
            <th>P</th>
            <th>I</th>
            <th>D</th>
            <th>I_MIN</th>
            <th>I_MAX</th>
            <th>Polarity</th>
            <th>Method</th>
            <th>Step</th>
            <th>Target</th>
            <th>Theta</th>
            <th>Operate</th>
          </tr>
    
    
          {% for abc_item in abc_items %}
          <tr>
    
            <td>
                {{ abc_item[0] }}
            </td>
    
            <td>
                {{ abc_item[1] }}
            </td>
    
            <td>
              <input class="form-control" 
                style="width:60px"
                type="text"
                id="abc_p_val_{{ abc_item[1] }}"
              />
            </td>
            <td>
              <input class="form-control" 
                style="width:60px"
                type="text"
                id="abc_i_val_{{ abc_item[1] }}"
              />
            </td>
    
            <td>
              <input class="form-control" 
                style="width:60px"
                type="text"
                id="abc_d_val_{{ abc_item[1] }}"
              />
            </td>
    
            <td>
              <input class="form-control" 
                style="width:60px"
                type="text"
                id="abc_i_min_val_{{ abc_item[1] }}"
              />
            </td>
    
            <td>
              <input class="form-control" 
                style="width:60px"
                type="text"
                id="abc_i_max_val_{{ abc_item[1] }}"
              />
            </td>
    
            <td>
              <!--
                  <input class="form-control"  class="form-control" style="width:60px" type="text" id="<//?php echo 'abc_polarity_val_'. $key ?>">
                  -->
              <select class="form-control" 
                id="abc_polarity_val_{{ abc_item[1] }}"
                style="width:70px;"
              >
                <option value="0">-1</option>
                <option value="1">+1</option>
              </select>
            </td>
    
            <td>
              <select class="form-control" 
                id="abc_method_val_{{ abc_item[1] }}"
                style="width:60px;"
              >
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
              </select>
            </td>
    
            <td>
              <input class="form-control" 
                style="width:60px"
                type="text"
                id="abc_step_val_{{ abc_item[1] }}"
              />
            </td>
    
            <td>
              <input class="form-control" 
                style="width:60px"
                type="text"
                id="abc_target_val_{{ abc_item[1] }}"
              />
            </td>
    
            <td>
              <input class="form-control" 
                style="width:60px"
                type="text"
                id="abc_theta_val_{{ abc_item[1] }}"
              />
            </td>
    
            <td>
              <button
                class="btn btn-success"
                onClick="btn_abc_pid_get({{ abc_item[1] }})"
              >
                Get
              </button>
              &nbsp;&nbsp;
              <button
                class="btn btn-primary"
                onClick="btn_abc_pid_set({{ abc_item[1] }})"
              >
                Set
              </button>
            </td>
          </tr>
          {% endfor %}
            
        </table>
      </div>
</div>

<div class="row">
  <div class="col-md-4">
      <h3>Servive</h3>
      <table class="table table-hover table-condensed form-inline">
        <tr>
          <td>service</td>
          <td>
            <select class="form-control"  class="form-control" id="abc_service" style="width:200px; height:30px">
              <option value="0x0">Off</option>
              <option value="0x3f">On</option>
            </select>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <button id="set_abc_service_btn" class="btn btn-primary">Set</button>

            <button id="get_abc_service_btn" class="btn btn-success">Get</button>
          </td>
        </tr>
      </table>
  
      <h3>Setting</h3>
      <table class="table table-hover table-condensed form-inline">
        <tr>
          <td>freq_idx</td>
          <td>
            <!--
              <input class="form-control"  class="form-control" id="freq_idx" type="text">
              -->
            <select class="form-control"  class="form-control" id="freq_idx" style="width:200px; height:30px">
              <option value="0">28, 21, 12, 84</option>
              <option value="1">35, 14, 10, 70</option>
              <option value="2">40, 24, 15, 120</option>
              <option value="3">45, 30, 18, 90</option>
              <option value="4">45, 36, 20, 180</option>
              <option value="5">56, 42, 24, 168</option>
              <option value="6">63, 18, 14, 212</option>
              <option value="7">70, 28, 20, 140</option>
              <option value="8">70, 30, 21, 210</option>
              <option value="9">75, 50, 30, 150</option>
              <option value="10">80, 48, 30, 240</option>
              <option value="11">84, 63, 36, 252</option>
              <option value="12">90, 60, 36, 180</option>
              <option value="13">99, 22, 18, 198</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>ampl</td>
          <td>
            <input class="form-control"  class="form-control" id="ampl" type="text" />
          </td>
        </tr>
        <tr>
          <td>theta</td>
          <td>
            <input class="form-control"  class="form-control" id="theta" type="text" />
          </td>
        </tr>
        <tr>
          <td>iter</td>
          <td>
            <input class="form-control"  class="form-control" id="iter" type="text" />
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <button id="set_abc_settings_btn" class="btn btn-primary">Set</button>

            <button id="get_abc_settings_btn" class="btn btn-success">Get</button>
          </td>
        </tr>
      </table>
  </div>


  <div class="col-md-4">
      <h3>Algo</h3>
      <table class="table table-hover table-condensed form-inline">
        <tr>
          <td>algo</td>
          <td>
            <select class="form-control"  class="form-control" id="abc_algo" style="width:200px; height:30px">
              <option value="0">PID</option>
              <option value="1">Butterfly</option>
            </select>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <button id="set_abc_algo_btn" class="btn btn-primary">Set</button>

            <button id="get_abc_algo_btn" class="btn btn-success">Get</button>
          </td>
        </tr>
      </table>
  <!--   
      <h3>Dither</h3>
      <table class="table table-hover table-condensed form-inline">
        <tr>
          <td>dither #1</td>
          <td><span id="abc_dither_1">--</span></td>
        </tr>
        <tr>
          <td>dither #2</td>
          <td><span id="abc_dither_2">--</span></td>
        </tr>
      </table>
  
    <table class="table table-hover table-condensed form-inline">
        <tr>
          <td>
            <select class="form-control"  class="form-control" id="abc_dither_ch" style="width:100px; height:30px">
              <option value="0">Dither #1</option>
              <option value="1">Dither #2</option>
            </select>
          </td>
          <td>
            <select class="form-control"  class="form-control" id="abc_dither_ph" style="width:100px; height:30px">
              <option value="0">XP</option>
              <option value="1">XI</option>
              <option value="2">XQ</option>
              <option value="3">YP</option>
              <option value="4">YI</option>
              <option value="5">YQ</option>
            </select>
          </td>
        </tr>
        <tr>
          <td colspan="4">
            <button id="abc_dither_set_btn" class="btn btn-primary">Set</button>
            <button id="abc_dither_get_btn" class="btn btn-success">Get</button>
          </td>
        </tr>
      </table> -->

      <h3>Fine</h3>
      <table class="table table-hover table-condensed form-inline">
        <tr>
          <td>Value</td>
          <td>
            <input class="form-control"  class="form-control" id="fine_val" type="text" />
             &nbsp;&nbsp;
            <span style="font-size:12px" id="txt_fine_val">---</span>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <button id="abc_fine_btn_set" class="btn btn-primary">Set</button>
            <button id="abc_fine_btn_get" class="btn btn-success">Get</button>
          </td>
        </tr>
      </table>

  </div>
  <div class="col-md-4">
    <h3>Dither Status</h3>
    <table class="table table-hover table-condensed form-inline">
      <tr>
        <td>status</td>
        <td>
          <select class="form-control"  class="form-control" id="abc_dither" style="width:200px; height:30px">
            <option value="0">Disable</option>
            <option value="1">Enable</option>
          </select>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <button id="set_abc_dither_btn" class="btn btn-primary">Set</button>

          <button id="get_abc_dither_btn" class="btn btn-success">Get</button>
        </td>
      </tr>
    </table>

<!--     <h3>Demod</h3>
    <table class="table table-hover table-condensed form-inline">
      <tr>
        <td>sin</td>
        <td><span id="abc_demod_sin">---</span></td>
      </tr>
      <tr>
        <td>cos</td>
        <td><span id="abc_demod_cos">---</span></td>
      </tr>
      <tr>
        <td colspan="2">
          <button id="abc_demod_btn" class="btn btn-success">Get</button>
        </td>
      </tr>
    </table> -->
  </div>



</div>

{% endblock %} 

{% block js%}
{{ super() }}
<script type="text/javascript">

  function btn_abc_pid_get(idx)
  {
    $.post("api/btn_abc_pid_get",
        {
            idx:idx,
        },
        function(data,status){
            console.log("data: " + data);
            // d = JSON.parse(data);
            d = data.split(',');
            console.log(d);

            $("#abc_p_val_" + idx).val( $.trim(d[0]) );
            $("#abc_i_val_" + idx).val($.trim(d[1]));
            $("#abc_d_val_" + idx).val($.trim(d[2]));
            $("#abc_i_min_val_" + idx).val($.trim(d[3]));
            $("#abc_i_max_val_" + idx).val($.trim(d[4]));
            //$("#abc_polarity_val_" + idx).val(d[5]);
            $("#abc_polarity_val_" + idx).val( $.trim(d[5] )).prop('selected',true);
            $("#abc_step_val_" + idx).val($.trim(d[6]));
            $("#abc_method_val_" + idx).val($.trim(d[7]));
            $("#abc_target_val_" + idx).val($.trim(d[8]));
            $("#abc_theta_val_" + idx).val($.trim(d[9]));
        });
  }

  function btn_abc_pid_set(idx)
  {
    $.post("api/btn_abc_pid_set",
        {
          idx : idx,
          abc_p_val     : $("#abc_p_val_" + idx).val(),
          abc_i_val     : $("#abc_i_val_" + idx).val(),
          abc_d_val     : $("#abc_d_val_" + idx).val(),
          abc_i_min_val     : $("#abc_i_min_val_" + idx).val(),
          abc_i_max_val     : $("#abc_i_max_val_" + idx).val(),
          abc_polarity_val : $("#abc_polarity_val_" + idx).val(),
          abc_step_val  : $("#abc_step_val_" + idx).val(),
          abc_method_val  : $("#abc_method_val_" + idx).val(),
          abc_target_val  : $("#abc_target_val_" + idx).val(),
          abc_theta_val   : $("#abc_theta_val_" + idx).val()
        },
        function(data,status){
          toastr["success"]("Command successfully issued.");
          console.log(data);
        });
  }


  $(document).ready(function() {
    toastr.options = {
        "closeButton": true,
        "positionClass": "toast-top-center"
    }
    
    $("#set_abc_service_btn").click(function(){
        $.post("api/set_abc_service",
            {
              abc_service_val : $("#abc_service").val()
            },
            function(data,status){
              toastr["success"]("Command successfully issued.");
              console.log(data);

              // $.get("api/get_abc_service", function(data, status){
              //   console.log(data);
              //   $('#abc_service').val( data ).prop('selected',true);
              // });

            });
      });

    $("#get_abc_service_btn").click(function(){
          $.get("api/get_abc_service", function(data, status){
            console.log(data);
            $('#abc_service').val( data ).prop('selected',true);
          });
      });


      $("#set_abc_algo_btn").click(function(){
        $.post("api/set_abc_algo",
            {
              abc_algo_val : $("#abc_algo").val()
            },
            function(data,status){
              toastr["success"]("Command successfully issued.");
              console.log(data);

              // $.get("api/get_abc_algo", function(data, status){
              //   console.log(data);
              //   $('#abc_algo').val( data ).prop('selected',true);
              // });

            });
      });

      $("#get_abc_algo_btn").click(function(){
        $.get("api/get_abc_algo", function(data, status){
          console.log(data);
          $('#abc_algo').val( data ).prop('selected',true);
        });
      });


      $("#set_abc_dither_btn").click(function(){
        $.post("api/set_abc_dither",
            {
              abc_dither_val : $("#abc_dither").val()
            },
            function(data,status){
                toastr["success"]("Command successfully issued.");
                console.log(data);

                // $.get("api/get_abc_dither", function(data, status){
                //   console.log(data);
                //   $('#abc_dither').val( data ).prop('selected',true);
                // });
            });
      });

      $("#get_abc_dither_btn").click(function(){
          $.get("api/get_abc_dither", function(data, status){
            console.log(data);
            $('#abc_dither').val( data ).prop('selected',true);
          });
      });


      $("#set_abc_settings_btn").click(function(){
        $.post("api/set_abc_settings",
            {
              abc_freq_idx_val  : $("#freq_idx").val(),
              abc_ampl_val    : $("#ampl").val(),
              abc_theta_val   : $("#theta").val(),
              abc_iter_val    : $("#iter").val()
            },
            function(data,status){
                toastr["success"]("Command successfully issued.");
                console.log(data);

                // $.get("api/get_abc_settings", function(data, status){
                //     d = JSON.parse(data);
                //     console.log(d);

                //     // (2, 500, 252, 512)
                //     //$('#freq_idx').val( d[0] );
                //     $('#freq_idx').val( d[0] ).prop('selected',true);
                //     $('#ampl').val( d[1] );
                //     $('#theta').val( d[2] );
                //     $('#iter').val( d[3] );
                // });

            });
      });


      $("#get_abc_settings_btn").click(function(){
        $.get("api/get_abc_settings", function(data, status){
            console.log(data);
            // d = JSON.parse(data);
            // console.log(d);
            d = data.split(',');

            $('#freq_idx').val( d[0] ).prop('selected',true);
            $('#ampl').val( d[1] );
            $('#theta').val( d[2] );
            $('#iter').val( d[3] );
        });
      });


      $("#abc_fine_btn_set").click(function(){
        $.post("api/set_abc_fine",
            {
              fine_val  : $("#fine_val").val(),
            },
            function(data,status){
                toastr["success"]("Command successfully issued.");
                console.log(data);
            });
      });

      $("#abc_fine_btn_get").click(function(){
          $.get("api/get_abc_fine", function(data, status){
              console.log(data);
              $('#txt_fine_val').html( data );
          });
      });



    
  });
</script>
{% endblock %}
